<template>
  <a-card :body-style="{ padding: '18px' }" :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form-model layout="inline">
        <a-row :gutter="24">
          <a-col :md="6" :sm="24">
            <a-form-model-item :label="$t('all.autotext666')" labelAlign="left">
              <a-range-picker v-model="timeValue" valueFormat="YYYY-MM-DD" @change="handleChangeDate"/>
            </a-form-model-item>
          </a-col>
          <a-col :md="4" :sm="24">
            <a-form-model-item :label="$t('all.autotext1692')" labelAlign="left">
              <a-input v-model="queryParam.applyNo" />
            </a-form-model-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-space>
              <a-button type="primary" @click="search">{{ $t('all.autotext30') }}</a-button>
              <a-button style="margin-left: 8px" @click="clearCondition">{{ $t('all.autotext340') }}</a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <a-tabs v-model="activeKey">
      <a-tab-pane
        key="0"
        :tab="`${$t('all.autotext1645')} (${count.todoCount})`"
      >
        <!-- <todoItem
          ref="todoRef"
          type="0"
          :queryParam="queryParam"
          @countBack="countBack"
        /> -->
      </a-tab-pane>
      <a-tab-pane
        key="1,-1,-2,-11"
        :tab="`${$t('all.autotext1695')} (${count.completedCount})`"
      >
      </a-tab-pane>
    </a-tabs>
    <todoItem
      ref="todoRef"
      :type="activeKey"
      :queryParam="queryParam"
      @countBack="countBack"
    />
  </a-card>
</template>

<script>

import todoItem from './components/todoItem'

export default {
  components: {
    todoItem
  },
  data () {
    return {
      activeKey: '0',
      timeValue: null,
      count: {
        todoCount: 0,
        completedCount: 0
      },
      queryParam: {}
    }
  },
  methods: {
    search () {
      this.$refs.todoRef.getProlist()
    },
    countBack (e) {
      this.count = e
      this.$store.commit('SET_NOTODONUMBER', e.todoCount)
    },
    // 清除条件
    clearCondition () {
      this.queryParam = {}
      this.timeValue = null
      this.$nextTick(() => {
        this.$refs.todoRef.getProlist()
      })
    },
    // 时间选择器 回调
    handleChangeDate (e) {
      this.queryParam.startTime = e[0]
      this.queryParam.endTime = e[1]
    }
  }
}
</script>

